<template>
  <div>
    <van-nav-bar title="请选择收货地址" left-text="返回" left-arrow @click-left="$router.back()" />
    <div class="addressList">
      <van-address-list :list="list" @add="onAdd" @edit="onEdit" @select="select" />
    </div>

  </div>
</template>

<script>
  export default {
    computed: {
      list() {
        if (this.$store.user) {
          return this.$store.user.addressList
        } else {
          return []
        }
      }
    },
    methods: {
      onAdd() {
        this.$router.push('/addressnew/0')

      },
      onEdit(addr) {
        this.$router.push('/addressnew/' + addr.id)
      },
      select(addr) {
        this.$store.chosenAddr = addr
        this.$router.back()
      }
    },
    mounted() {

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .addressList {
    background-color: #f8f8f8;
    height: calc(100vh - 96px);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
</style>